<!DOCTYPE html><html lang="en" class="text-gray-500 antialiased bg-white"><head><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-YK9KKZB935"></script><script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-YK9KKZB935', {
              page_path: window.location.pathname,
            });
          </script><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6"/><meta name="theme-color" content="#ffffff"/><meta name="description" content="Tailwind CSS 是一个功能类优先的 CSS 框架，它由 Adam Wathan 创建。本站提供 Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握并使用这一框架。"/><meta name="keywords" content="Tailwind CSS, CSS 框架, CSS framework, Tailwind CSS 中国, Tailwind CSS 中文文档, Tailwind CSS 代码,Tailwind CSS 入门"/><meta name="author" content="TailwindCSS中文网"/><meta name="google-site-verification" content="K6lmDHP95YNtBrmzbE8A5HivIoXC9kPq47XvdBM3jVY"/><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta name="twitter:site" content="@tailwindcss"/><meta name="twitter:description" content="学习如何在您的工程中使用 Tailwind CSS"/><meta name="twitter:creator" content="@tailwindcss"/><meta property="og:url" content="https://tailwindcss.com/docs/installation"/><meta property="og:type" content="article"/><meta property="og:description" content="学习如何在您的工程中使用 Tailwind CSS"/><meta property="og:image" content="https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"/><link rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"/><title>安装 - Tailwind CSS</title><meta name="twitter:title" content="安装 - Tailwind CSS"/><meta property="og:title" content="安装 - Tailwind CSS"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"/><link rel="preload" href="/_next/static/css/91ad8a1bc71db66a58e6.css" as="style" crossorigin="anonymous"/><link rel="stylesheet" href="/_next/static/css/91ad8a1bc71db66a58e6.css" crossorigin="anonymous" data-n-g=""/><noscript data-n-css="true"></noscript><link rel="preload" href="/_next/static/chunks/main-53486d82b2545edae223.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/9f4ef91407e4b5afa7b6fb6ed79ed59ba0198a03.cff4864bd60c6088de2d.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/ce33ec08090f482ab0615cf50693463f3d0dfff9.f4323d55efa10804a132.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/docs/installation-9a7c0a68655cdddbb753.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div class="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto bg-white flex-none flex"><div class="flex-none pl-4 sm:pl-6 xl:pl-8 flex items-center border-b border-gray-200 lg:border-b-0 lg:w-60 xl:w-72"><a class="overflow-hidden w-10 md:w-auto" href="/"><span class="sr-only">Tailwind CSS home page</span><svg viewBox="0 0 247 31" class="w-auto h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z" fill="#06B6D4"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z" fill="#000"></path></svg></a></div><div class="flex-auto border-b border-gray-200 h-18 flex items-center justify-between px-4 sm:px-6 lg:mx-6 lg:px-0 xl:mx-8"><button type="button" class="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 hover:text-gray-600 transition-colors duration-200"><svg width="24" height="24" fill="none" class="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>快速搜索<span class="hidden sm:inline"> 一切</span></span></button><div class="flex items-center space-x-6"><form class="relative hidden lg:block"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form><a href="https://github.com/tailwindlabs/tailwindcss" class="text-gray-400 hover:text-gray-500 transition-colors duration-200"><span class="sr-only">Tailwind CSS on GitHub</span><svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></div><button type="button" class="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"><span class="sr-only">Open site navigation</span><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform"><path d="M4 8h16M4 16h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform opacity-0 scale-80"><path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="w-full max-w-8xl mx-auto"><div class="lg:flex"><div id="sidebar" class="fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block hidden"><div id="navWrapper" class="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0"><div class="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white"></div><nav id="nav" class="px-1 pt-6 overflow-y-auto font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pt-10 lg:pb-16 sticky?lg:h-(screen-18)"><div class="relative flex mb-8 px-3 lg:hidden"><form class="relative"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form></div><ul><li><a href="/docs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4 text-gray-900"><div class="mr-3 rounded-md bg-gradient-to-br from-pink-500 to-rose-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C10.0929 6 11.1175 6.29218 12 6.80269V16.8027C11.1175 16.2922 10.0929 16 9 16C7.90714 16 6.88252 16.2922 6 16.8027V6.80269C6.88252 6.29218 7.90714 6 9 6Z" fill="#FFF1F2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15 6C16.0929 6 17.1175 6.29218 18 6.80269V16.8027C17.1175 16.2922 16.0929 16 15 16C13.9071 16 12.8825 16.2922 12 16.8027V6.80269C12.8825 6.29218 13.9071 6 15 6Z" fill="#FECDD3"></path></svg></div>中文文档</a></li><li><a href="https://tailwindui.com/components?utm_source=tailwindcss&amp;utm_medium=navigation" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-purple-500 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M6 9l6-3 6 3v6l-6 3-6-3V9z" fill="#F5F3FF"></path><path d="M6 9l6 3v6l-6-3V9z" fill="#DDD6FE"></path><path d="M18 9l-6 3v6l6-3V9z" fill="#C4B5FD"></path></svg></div>组件</a></li><li><a href="https://play.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-yellow-400 to-orange-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.196 6.02a1 1 0 01.785 1.176l-2 10a1 1 0 01-1.961-.392l2-10a1 1 0 011.176-.784z" fill="#FDE68A"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.293 9.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414L16.586 12l-1.293-1.293a1 1 0 010-1.414zM8.707 9.293a1 1 0 010 1.414L7.414 12l1.293 1.293a1 1 0 11-1.414 1.414l-2-2a1 1 0 010-1.414l2-2a1 1 0 011.414 0z" fill="#FDF4FF"></path></svg></div>在线运行环境</a></li><li><a href="https://blog.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-green-400 to-cyan-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M8 9a1 1 0 011-1h8a1 1 0 011 1v7.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 018 16.5V9z" fill="#6EE7B7"></path><path d="M15 7a1 1 0 00-1-1H7a1 1 0 00-1 1v9.5A1.5 1.5 0 007.5 18H16v-.085a1.5 1.5 0 01-1-1.415V7z" fill="#ECFDF5"></path><path fill="#A7F3D0" d="M8 8h5v4H8zM8 14h5v2H8z"></path></svg></div>新闻</a></li><li><a href="/resources" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-light-blue-400 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M17 13a1 1 0 011 1v3a1 1 0 01-1 1H8.5a2.5 2.5 0 010-5H17z" fill="#93C5FD"></path><path d="M12.743 7.722a1 1 0 011.414 0l2.122 2.121a1 1 0 010 1.414l-6.01 6.01a2.5 2.5 0 11-3.536-3.536l6.01-6.01z" fill="#BFDBFE"></path><path d="M6 7a1 1 0 011-1h3a1 1 0 011 1v8.5a2.5 2.5 0 01-5 0V7z" fill="#EFF6FF"></path><path d="M9.5 15.5a1 1 0 11-2 0 1 1 0 012 0z" fill="#60A5FA"></path></svg></div>资源</a></li><li><a href="https://www.youtube.com/tailwindlabs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-10"><div class="mr-3 rounded-md bg-gradient-to-br from-fuchsia-500 to-purple-600"><svg class="h-6 w-6" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="#F3E8FF"></circle><path d="M14.52 11.136a1 1 0 010 1.728l-3.016 1.759A1 1 0 0110 13.759v-3.518a1 1 0 011.504-.864l3.015 1.76z" fill="#C084FC"></path></svg></div>视频</a></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">入门</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block text-cyan-700" href="/docs/installation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-50"></span><span class="relative">安装</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="https://blog.tailwindcss.com/tailwindcss-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">发布说明</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/upgrading-to-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">升级指南</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/using-with-preprocessors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">使用预处理器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/optimizing-for-production"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">生产优化</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/browser-support"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浏览器支持</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/intellisense"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">智能感知</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">核心概念</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/utility-first"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">功能优先</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/responsive-design"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">响应式设计</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/hover-focus-and-other-states"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">悬停、焦点和其它状态</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/dark-mode"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">深色模式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-base-styles"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加基础样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/extracting-components"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">提取组件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-new-utilities"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加新的功能类</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/functions-and-directives"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">函数与指令</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">定制</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">配置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/theme"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">主题</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/breakpoints"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">断点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/customizing-colors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/customizing-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuring-variants"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变体</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/plugins"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">插件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/presets"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">预设</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">基础样式</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/preflight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Preflight</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">布局</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/container"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">容器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-sizing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Box Sizing</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/display"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Display</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/float"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/clear"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">清除浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-fit"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Fit</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Position</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overscroll-behavior"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Overscroll Behavior</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">定位</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/top-right-bottom-left"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Top / Right / Bottom / Left</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/visibility"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">可见性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/z-index"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Z-Index</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒模型</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-direction"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Direction</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-wrap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Wrap</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-grow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Grow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-shrink"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Shrink</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/order"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Order</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">网格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-column"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Column Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-row"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Row Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-flow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Flow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Gap</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒对齐</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Self</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">间距</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/padding"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">内边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/margin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">外边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/space"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Space Between</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">尺寸</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大高度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">排版</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-family"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体序列</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-smoothing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体平滑度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-weight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体粗细</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-variant-numeric"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Font Variant Numeric</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/letter-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字母间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/line-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">行高</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-type"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记类型</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-decoration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本装饰</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本转换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/vertical-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">垂直对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/whitespace"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">空格</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/word-break"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本换行</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">背景</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-attachment"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像固定</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-clip"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像裁剪</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-repeat"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像重复</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-image"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gradient-color-stops"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">渐变色停止</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">边框</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-radius"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框圆角</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移颜色</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">特效</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-shadow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">盒阴影</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">不透明度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">表格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-collapse"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格边框</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/table-layout"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格布局</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">过渡和动画</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-property"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡属性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-duration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡持续时间</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-timing-function"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡计时函数</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-delay"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡延迟</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/animation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">动画</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">转换</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform-origin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换原点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/scale"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">缩放</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/rotate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">旋转</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/translate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">平移</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/skew"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">倾斜</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">交互</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/appearance"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表单外观</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/cursor"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">光标效果</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/outline"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/pointer-events"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">指向事件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/resize"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">大小调整</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/user-select"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">用户选择</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">SVG</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/fill"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">填充</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条厚度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">可访问性</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/screen-readers"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">屏幕阅读器</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">官方插件</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/typography-plugin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">排版</span></a></li></ul></li></ul></nav></div></div><div id="content-wrapper" class="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible"><div class="pt-10 pb-24 lg:pb-16 w-full flex"><div class="min-w-0 flex-auto px-4 sm:px-6 xl:px-8"><div class="pb-10 border-b border-gray-200 mb-10"><div class="flex items-center"><h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">安装</h1></div><p class="mt-1 text-lg text-gray-500">学习如何在您的工程中使用 Tailwind CSS</p></div><div><div class="prose"><h2 class="group flex whitespace-pre-wrap" id=""><a href="#" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>集成指南</span></h2><p>对于不同的框架/工具，安装 Tailwind CSS 是完全不同的过程，所以我们整理了一份常见安装的指南集合。</p></div><div class="grid grid-cols-2 sm:grid-cols-3 gap-4 text-center"><a class="flex flex-col items-center py-4 shadow-sm ring-1 ring-black ring-opacity-5 rounded-xl" href="/docs/guides/nextjs"><svg width="96" height="48" viewBox="0 0 96 48" fill="none" class="h-12 w-auto"><path d="M33.663 16.442h12.38v.986H34.798v7.422h10.575v.986H34.798v8.149h11.374v.986H33.663V16.442zm13.49 0h1.315l5.829 8.148 5.957-8.148 8.104-10.35-13.313 19.355 6.86 9.524h-1.367l-6.241-8.668-6.267 8.668h-1.342l6.912-9.524-6.447-9.005zm15.242.986v-.986h14.108v.986h-6.5v17.543H68.87V17.428h-6.473zm-44.22-.986h1.42l19.56 29.335L31.07 34.97 19.362 17.843l-.052 17.128h-1.134V16.442zM76.39 33.687a.401.401 0 01-.406-.412c0-.233.174-.413.406-.413a.4.4 0 01.405.413.4.4 0 01-.405.412zm1.115-1.086h.607c.009.33.25.551.602.551.395 0 .618-.238.618-.684v-2.825h.619v2.828c0 .804-.464 1.266-1.232 1.266-.72 0-1.214-.449-1.214-1.136zm3.254-.035h.613c.052.379.422.62.955.62.496 0 .86-.258.86-.612 0-.305-.23-.488-.758-.612l-.514-.125c-.72-.169-1.048-.518-1.048-1.105 0-.712.58-1.186 1.448-1.186.81 0 1.4.474 1.436 1.147h-.602c-.058-.368-.378-.599-.842-.599-.488 0-.814.236-.814.596 0 .285.21.449.73.57l.438.109c.817.19 1.154.523 1.154 1.124 0 .765-.592 1.244-1.535 1.244-.883 0-1.477-.457-1.521-1.172z" fill="#000"></path></svg><div class="mt-3 text-sm text-gray-900 font-semibold sm:mt-2">Next.js</div></a><a class="flex flex-col items-center py-4 shadow-sm ring-1 ring-black ring-opacity-5 rounded-xl" href="/docs/guides/vue-3-vite"><svg width="48" height="48" viewBox="0 0 48 48" fill="none" class="h-12 w-auto"><path fill="#fff" d="M0 0h48v48H0z"></path><path d="M24 14.502l-5.202-9.01h-7.446L24 27.401 36.65 5.492h-7.447L24 14.502z" fill="#435466"></path><path d="M38.382 5.492L24.001 30.401 9.62 5.492H1.477L24 44.507 46.525 5.492h-8.143z" fill="#4DBA87"></path></svg><div class="mt-3 text-sm text-gray-900 font-semibold sm:mt-2">Vue 3 (Vite)</div></a><a class="flex flex-col items-center py-4 shadow-sm ring-1 ring-black ring-opacity-5 rounded-xl" href="/docs/guides/laravel"><svg width="48" height="48" viewBox="0 0 48 48" fill="none" class="h-12 w-auto"><g clip-path="url(#laravel_svg__clip0)"><path d="M45.16 12.562c.015.059.023.12.023.18v9.482a.692.692 0 01-.347.6l-7.958 4.582v9.081a.693.693 0 01-.346.6L19.92 46.65c-.038.022-.08.035-.121.05-.015.005-.03.015-.047.02a.695.695 0 01-.354 0c-.019-.006-.036-.016-.054-.023-.038-.014-.078-.026-.114-.047L2.62 37.087a.693.693 0 01-.347-.6V8.042c0-.062.01-.123.025-.182.005-.02.017-.038.024-.057.013-.037.025-.074.044-.108.013-.022.032-.04.047-.06.02-.029.038-.057.062-.081.02-.02.046-.035.068-.052.025-.02.048-.043.076-.06h.001l8.305-4.781a.693.693 0 01.691 0l8.305 4.781h.002c.027.018.05.04.076.059.022.017.047.033.067.052.024.025.042.053.062.081.015.02.035.039.047.061.02.035.031.071.045.108.007.02.019.038.024.058.016.06.024.12.024.181v17.767l6.92-3.985V12.74c0-.06.01-.121.025-.18.006-.02.017-.038.024-.058.014-.036.026-.074.045-.107.013-.023.032-.04.047-.062.02-.027.038-.056.062-.08.02-.02.045-.035.067-.052.026-.02.049-.043.076-.06h.001l8.306-4.781a.692.692 0 01.691 0l8.305 4.782c.03.017.052.038.078.058.021.018.046.033.066.052.024.025.042.054.062.081.016.021.035.04.047.062.02.033.031.07.045.107.008.02.02.038.024.059zm-1.361 9.262v-7.885l-2.906 1.673-4.015 2.312v7.885l6.922-3.985h-.001zm-8.305 14.263v-7.89l-3.95 2.256-11.277 6.436v7.964l15.227-8.766zM3.658 9.24v26.848l15.225 8.766V36.89l-7.954-4.502-.002-.001-.004-.002c-.027-.015-.05-.038-.074-.057-.022-.017-.047-.031-.066-.05l-.002-.003c-.022-.021-.038-.048-.057-.072-.017-.024-.038-.044-.052-.068v-.002c-.016-.026-.026-.057-.037-.087-.011-.026-.026-.05-.033-.078-.008-.033-.01-.068-.013-.102-.004-.025-.01-.051-.01-.077V13.224L6.563 10.91 3.658 9.24v-.001zm7.613-5.18l-6.92 3.983 6.919 3.983 6.918-3.984L11.27 4.06h.001zm3.599 24.857l4.014-2.31V9.238l-2.906 1.673-4.015 2.312V30.59l2.907-1.674zM36.187 8.76l-6.92 3.983 6.92 3.983 6.917-3.984-6.917-3.982zm-.693 9.165l-4.015-2.312-2.906-1.673v7.885l4.014 2.31 2.907 1.675v-7.885zm-15.92 17.768L29.722 29.9l5.073-2.895-6.913-3.98-7.96 4.582-7.255 4.177 6.907 3.91z" fill="#FF2D20"></path></g><defs><clipPath id="laravel_svg__clip0"><path fill="#fff" d="M0 0h48v48H0z"></path></clipPath></defs></svg><div class="mt-3 text-sm text-gray-900 font-semibold sm:mt-2">Laravel</div></a><a class="flex flex-col items-center py-4 shadow-sm ring-1 ring-black ring-opacity-5 rounded-xl" href="/docs/guides/nuxtjs"><svg width="48" height="48" viewBox="0 0 48 48" fill="none" class="h-12 w-auto"><path d="M27.07 15.679l-1.505 2.65-5.15-9.068L4.607 37.098H15.31c0 1.464 1.168 2.65 2.608 2.65H4.607a2.6 2.6 0 01-2.258-1.325 2.69 2.69 0 010-2.65L18.158 7.934a2.6 2.6 0 012.258-1.326 2.6 2.6 0 012.258 1.326l4.397 7.744z" fill="#00C58E"></path><path d="M38.48 35.773l-9.906-17.442-1.505-2.651-1.506 2.65-9.905 17.443a2.69 2.69 0 000 2.651 2.6 2.6 0 002.258 1.326h18.303a2.6 2.6 0 002.259-1.325 2.69 2.69 0 000-2.652h.002zM17.916 37.1l9.153-16.117 9.15 16.117H17.916z" fill="#2F495E"></path><path d="M45.564 38.423a2.6 2.6 0 01-2.257 1.325H36.22c1.44 0 2.608-1.186 2.608-2.65H43.3L30.61 14.746l-2.034 3.582-1.506-2.65 1.282-2.258a2.6 2.6 0 012.258-1.325 2.6 2.6 0 012.258 1.325l12.696 22.35a2.69 2.69 0 010 2.652z" fill="#108775"></path></svg><div class="mt-3 text-sm text-gray-900 font-semibold sm:mt-2">Nuxt.js</div></a><a class="flex flex-col items-center py-4 shadow-sm ring-1 ring-black ring-opacity-5 rounded-xl" href="/docs/guides/create-react-app"><svg fill="none" viewBox="0 0 48 48" class="h-12 w-auto"><g clip-path="url(#create-react-app_svg__prefix__clip0)"><path fill="#09D3AC" d="M40.421 21.99c0-2.068-2.434-3.902-6.176-5.022.9-3.802.507-6.828-1.285-7.851a2.866 2.866 0 00-1.438-.36c-1.671 0-3.784 1.167-5.918 3.187-2.134-2.005-4.24-3.166-5.91-3.166a2.84 2.84 0 00-1.458.366c-1.783 1.026-2.152 4.034-1.264 7.818-3.725 1.114-6.147 2.933-6.153 4.991-.006 2.06 2.438 3.902 6.18 5.019-.9 3.805-.51 6.828 1.285 7.851.437.245.933.37 1.434.36 1.675 0 3.788-1.167 5.922-3.187 2.13 2.005 4.238 3.166 5.91 3.166a2.87 2.87 0 001.458-.366c1.783-1.026 2.15-4.034 1.264-7.803 3.724-1.129 6.146-2.948 6.15-5.003zM26.98 12.621c2.458-2.2 3.994-2.437 4.54-2.437.254-.008.505.052.727.174.858.49 1.2 2.215.927 4.502a17.01 17.01 0 01-.3 1.738 29.323 29.323 0 00-3.776-.621 29.54 29.54 0 00-2.473-3.025 7.53 7.53 0 01.355-.33zm-7.44 11.07c.233.45.482.9.74 1.353.259.453.529.912.829 1.365a28.224 28.224 0 01-2.353-.438c.21-.762.477-1.512.783-2.28zm-.832-5.715c.76-.177 1.555-.324 2.38-.438-.3.444-.558.9-.828 1.377-.27.477-.508.9-.739 1.357a35.303 35.303 0 01-.813-2.296zm1.564 4.003a35.87 35.87 0 011.227-2.358 34.91 34.91 0 011.432-2.285 34.292 34.292 0 012.7-.099c.928.003 1.802.036 2.67.105.497.727.974 1.501 1.425 2.267.45.765.864 1.566 1.236 2.35-.369.786-.78 1.575-1.224 2.355a34.05 34.05 0 01-1.432 2.287 34.268 34.268 0 01-5.37-.006 33.674 33.674 0 01-1.428-2.265 35.2 35.2 0 01-1.224-2.35h-.012zm9.862-4.432c.816.114 1.606.26 2.353.435a27.04 27.04 0 01-.792 2.266 43.689 43.689 0 00-1.549-2.701h-.012zm.828 7.479c.258-.454.505-.908.739-1.36.3.78.6 1.549.81 2.3a26.13 26.13 0 01-2.377.434c.29-.444.57-.902.84-1.374h-.012zM25.61 13.973c.54.576 1.071 1.2 1.59 1.87a38.384 38.384 0 00-1.57-.036c-.53 0-1.073 0-1.599.036a25.4 25.4 0 011.579-1.87zm-6.657-3.602a1.46 1.46 0 01.741-.168 3.942 3.942 0 011.558.394c1.1.518 2.112 1.205 3.001 2.034l.352.322c-.882.945-1.7 1.948-2.45 3a29.68 29.68 0 00-3.796.62 15.277 15.277 0 01-.3-1.703c-.313-2.266.048-3.994.891-4.487l.003-.012zm-1.588 15.217a17.63 17.63 0 01-1.662-.6c-2.131-.9-3.452-2.056-3.452-3.043 0-.988 1.327-2.137 3.455-3.023a17.492 17.492 0 011.632-.582c.375 1.243.833 2.46 1.369 3.643a29.636 29.636 0 00-1.342 3.605zm6.903 5.733c-2.458 2.2-3.994 2.434-4.544 2.434a1.409 1.409 0 01-.726-.174c-.858-.49-1.2-2.215-.927-4.502.07-.584.17-1.163.3-1.735 1.244.286 2.505.493 3.775.618a29.157 29.157 0 002.473 3.025l-.35.334zm1.372-1.354c-.54-.576-1.072-1.2-1.594-1.87a33.9 33.9 0 001.573.036c.531 0 1.074 0 1.6-.033-.52.666-1.048 1.29-1.582 1.867h.003zm6.657 3.602a1.447 1.447 0 01-.744.177c-.547 0-2.101-.24-4.55-2.431l-.352-.322a29.522 29.522 0 002.446-3 29.104 29.104 0 003.8-.62c.132.583.237 1.153.3 1.703.297 2.263-.048 3.991-.903 4.48l.003.013zm3.241-8.536c-.513.21-1.056.405-1.632.58a29.554 29.554 0 00-1.372-3.645 29.44 29.44 0 001.348-3.601c.564.172 1.118.372 1.662.6 2.128.9 3.452 2.056 3.449 3.044-.003.987-1.327 2.124-3.458 3.01l.003.012zm-9.928-.306a2.755 2.755 0 10.006-5.51 2.755 2.755 0 00-.006 5.51zM7.302 5.365v33.21h36.637V5.365H7.302zm35.205 31.781H8.737V6.796h33.77v30.35zm-25.51-10.174c-.901 3.805-.511 6.828 1.284 7.851.437.245.933.37 1.434.36 1.675 0 3.788-1.167 5.922-3.187 2.13 2.005 4.238 3.166 5.91 3.166a2.87 2.87 0 001.458-.366c1.783-1.026 2.15-4.034 1.264-7.803 3.724-1.117 6.146-2.936 6.15-4.991.002-2.056-2.435-3.902-6.177-5.022.9-3.802.507-6.828-1.285-7.851a2.866 2.866 0 00-1.438-.36c-1.671 0-3.784 1.167-5.918 3.187-2.134-2.005-4.24-3.166-5.91-3.166a2.84 2.84 0 00-1.458.366c-1.783 1.026-2.152 4.034-1.264 7.818-3.725 1.114-6.147 2.933-6.153 4.991-.006 2.06 2.44 3.884 6.183 5.007h-.003zm7.265 4.349c-2.458 2.2-3.994 2.434-4.544 2.434a1.409 1.409 0 01-.726-.174c-.858-.49-1.2-2.215-.927-4.502.07-.584.17-1.163.3-1.735 1.244.286 2.505.493 3.775.618a29.157 29.157 0 002.473 3.025l-.35.334zm7.44-11.072c-.237-.45-.483-.9-.744-1.354-.26-.453-.54-.9-.816-1.347.816.114 1.606.26 2.353.435-.22.741-.483 1.5-.79 2.266h-.002zm.817 5.702a26.13 26.13 0 01-2.377.435 34.84 34.84 0 001.567-2.734 24.8 24.8 0 01.804 2.314l.006-.015zm-1.564-4.006c-.369.786-.78 1.575-1.224 2.355a34.05 34.05 0 01-1.432 2.287 34.316 34.316 0 01-5.37-.006 33.674 33.674 0 01-1.428-2.265 35.375 35.375 0 01-1.236-2.35 35.87 35.87 0 011.227-2.36 34.91 34.91 0 011.432-2.284 34.292 34.292 0 012.7-.099c.928.003 1.802.036 2.67.105.497.727.974 1.501 1.425 2.267.45.765.867 1.581 1.24 2.364l-.004-.014zm-9.847 4.465a28.224 28.224 0 01-2.353-.438c.222-.738.49-1.5.795-2.266.234.45.483.9.742 1.354.258.453.516.897.816 1.35zm-.837-7.503c-.262.45-.508.9-.739 1.357a30.191 30.191 0 01-.825-2.287c.76-.177 1.555-.324 2.38-.438-.28.444-.546.903-.816 1.368zm5.366 11.06c-.54-.576-1.072-1.2-1.594-1.87a33.9 33.9 0 001.573.036c.531 0 1.074 0 1.6-.033a27.702 27.702 0 01-1.58 1.867zm6.657 3.602a1.447 1.447 0 01-.744.177c-.547 0-2.101-.24-4.55-2.431l-.352-.322a29.522 29.522 0 002.446-3 29.106 29.106 0 003.8-.62c.132.583.237 1.153.3 1.703.3 2.263-.045 3.991-.9 4.48v.013zm1.585-15.205c.564.172 1.118.372 1.662.6 2.128.9 3.452 2.056 3.449 3.044-.003.987-1.324 2.149-3.455 3.034-.513.21-1.056.405-1.632.58a29.554 29.554 0 00-1.372-3.645 29.431 29.431 0 001.348-3.625v.012zm-6.903-5.73c2.458-2.2 3.994-2.437 4.54-2.437.254-.008.505.052.727.174.858.49 1.2 2.215.927 4.502a17.01 17.01 0 01-.3 1.738 29.306 29.306 0 00-3.776-.621 29.54 29.54 0 00-2.473-3.025c.114-.123.235-.235.358-.343l-.003.012zm-1.366 1.339c.54.576 1.071 1.2 1.59 1.87a38.384 38.384 0 00-1.57-.036c-.53 0-1.073 0-1.599.036a25.4 25.4 0 011.579-1.87zm-6.657-3.602a1.46 1.46 0 01.741-.168 3.942 3.942 0 011.558.394c1.1.518 2.112 1.205 3.001 2.034l.352.322c-.882.945-1.7 1.948-2.45 3a29.68 29.68 0 00-3.796.62 15.277 15.277 0 01-.3-1.703c-.313-2.266.048-3.994.891-4.487l.003-.012zm-3.247 8.551a17.492 17.492 0 011.632-.582c.375 1.243.833 2.46 1.369 3.643a29.623 29.623 0 00-1.348 3.602 17.63 17.63 0 01-1.662-.6c-2.131-.9-3.452-2.056-3.452-3.043 0-.988 1.333-2.134 3.46-3.02zm9.904.3a2.755 2.755 0 102.752 2.758 2.751 2.751 0 00-2.752-2.773v.015zm0 0a2.755 2.755 0 102.752 2.758 2.751 2.751 0 00-2.752-2.773v.015zm0 0a2.755 2.755 0 102.752 2.758 2.751 2.751 0 00-2.752-2.773v.015zm14.811 2.773c0-2.067-2.434-3.901-6.176-5.02.9-3.803.507-6.829-1.285-7.852a2.866 2.866 0 00-1.438-.36c-1.671 0-3.784 1.167-5.918 3.187-2.134-2.005-4.24-3.166-5.91-3.166a2.84 2.84 0 00-1.458.366c-1.783 1.026-2.152 4.034-1.264 7.818-3.725 1.114-6.147 2.933-6.153 4.991-.006 2.06 2.438 3.902 6.18 5.019-.9 3.805-.51 6.828 1.285 7.851.437.245.933.37 1.434.36 1.675 0 3.788-1.167 5.922-3.187 2.13 2.005 4.238 3.166 5.91 3.166a2.87 2.87 0 001.458-.366c1.783-1.026 2.15-4.034 1.264-7.803 3.724-1.135 6.146-2.954 6.15-5.01v.006zM26.98 12.623c2.458-2.2 3.994-2.437 4.54-2.437.254-.008.505.052.727.174.858.49 1.2 2.215.927 4.502a17.01 17.01 0 01-.3 1.738 29.323 29.323 0 00-3.776-.621 29.54 29.54 0 00-2.473-3.025 7.53 7.53 0 01.355-.33zm-7.44 11.07c.233.45.482.9.74 1.353.259.453.529.912.829 1.365a28.224 28.224 0 01-2.353-.438c.21-.762.477-1.512.783-2.28zm-.832-5.715c.76-.177 1.555-.324 2.38-.438-.3.444-.558.9-.828 1.377-.27.477-.508.9-.739 1.357a35.303 35.303 0 01-.813-2.296zm1.564 4.003a35.87 35.87 0 011.227-2.358 34.91 34.91 0 011.432-2.285 34.292 34.292 0 012.7-.099c.928.003 1.802.036 2.67.105.497.727.974 1.501 1.425 2.267.45.765.864 1.566 1.236 2.35-.369.786-.78 1.575-1.224 2.355a34.05 34.05 0 01-1.432 2.287 34.268 34.268 0 01-5.37-.006 33.674 33.674 0 01-1.428-2.265 35.2 35.2 0 01-1.224-2.35h-.012zm9.862-4.432c.816.114 1.606.26 2.353.435a27.04 27.04 0 01-.792 2.266 43.689 43.689 0 00-1.549-2.701h-.012zm.828 7.479c.258-.454.505-.908.739-1.36.3.78.6 1.549.81 2.3a26.13 26.13 0 01-2.377.434c.29-.444.57-.902.84-1.374h-.012zM25.61 13.973c.54.576 1.071 1.2 1.59 1.87a38.384 38.384 0 00-1.57-.036c-.53 0-1.073 0-1.599.036a25.4 25.4 0 011.579-1.87zm-6.657-3.602a1.46 1.46 0 01.741-.168 3.942 3.942 0 011.558.394c1.1.518 2.112 1.205 3.001 2.034l.352.322c-.882.945-1.7 1.948-2.45 3a29.68 29.68 0 00-3.796.62 15.277 15.277 0 01-.3-1.703c-.313-2.266.048-3.994.891-4.487l.003-.012zm-1.588 15.217a17.63 17.63 0 01-1.662-.6c-2.131-.9-3.452-2.056-3.452-3.043 0-.988 1.327-2.137 3.455-3.023a17.492 17.492 0 011.632-.582c.375 1.243.833 2.46 1.369 3.643a29.636 29.636 0 00-1.342 3.605zm6.903 5.733c-2.458 2.2-3.994 2.434-4.544 2.434a1.409 1.409 0 01-.726-.174c-.858-.49-1.2-2.215-.927-4.502.07-.584.17-1.163.3-1.735 1.244.286 2.505.493 3.775.618a29.157 29.157 0 002.473 3.025l-.35.334zm1.372-1.354c-.54-.576-1.072-1.2-1.594-1.87a33.9 33.9 0 001.573.036c.531 0 1.074 0 1.6-.033-.52.666-1.048 1.29-1.582 1.867h.003zm6.657 3.602a1.447 1.447 0 01-.744.177c-.547 0-2.101-.24-4.55-2.431l-.352-.322a29.522 29.522 0 002.446-3 29.104 29.104 0 003.8-.62c.132.583.237 1.153.3 1.703.297 2.263-.048 3.991-.903 4.48l.003.013zm3.241-8.536c-.513.21-1.056.405-1.632.58a29.554 29.554 0 00-1.372-3.645 29.44 29.44 0 001.348-3.601c.564.172 1.118.372 1.662.6 2.128.9 3.452 2.056 3.449 3.044-.003.987-1.327 2.124-3.458 3.01l.003.012zm-9.928-.306a2.755 2.755 0 10.006-5.51 2.755 2.755 0 00-.006 5.51zM4.805 41.084V7.862L3.367 9.303v33.213h36.631l1.435-1.432H4.805z"></path></g><defs><clipPath id="create-react-app_svg__prefix__clip0"><path fill="#fff" d="M0 0h48v48H0z"></path></clipPath></defs></svg><div class="mt-3 text-sm text-gray-900 font-semibold sm:mt-2">Create React App</div></a><a class="flex flex-col items-center py-4 shadow-sm ring-1 ring-black ring-opacity-5 rounded-xl" href="/docs/guides/gatsby"><svg width="48" height="48" viewBox="0 0 48 48" fill="none" class="h-12 w-auto"><path d="M41.282 24h-11v3.143h7.543c-1.1 4.715-4.557 8.643-9.114 10.215L10.64 19.286c1.885-5.5 7.228-9.428 13.357-9.428 4.714 0 8.957 2.357 11.628 5.971l2.357-2.043c-3.142-4.243-8.171-7.071-13.985-7.071-8.172 0-15.086 5.814-16.815 13.514l20.743 20.743c7.543-1.886 13.357-8.8 13.357-16.971zm-34.571.158c0 4.4 1.729 8.643 5.028 11.943 3.3 3.3 7.7 5.028 11.943 5.028L6.711 24.158z" fill="#fff"></path><path d="M24 2C11.9 2 2 11.9 2 24s9.9 22 22 22 22-9.9 22-22S36.1 2 24 2zM11.743 36.257c-3.3-3.3-5.029-7.7-5.029-11.943l17.129 16.972c-4.4-.157-8.8-1.729-12.1-5.029zm16.028 4.557L7.186 20.23C8.914 12.529 15.829 6.714 24 6.714c5.814 0 10.843 2.829 13.986 7.072l-2.357 2.043C32.957 12.214 28.714 9.857 24 9.857c-6.129 0-11.314 3.929-13.357 9.429l18.071 18.071c4.557-1.571 8.015-5.5 9.115-10.214h-7.543V24h11c0 8.171-5.815 15.086-13.515 16.814z" fill="#639"></path></svg><div class="mt-3 text-sm text-gray-900 font-semibold sm:mt-2">Gatsby</div></a></div><div class="prose"><p>没有在列表中看到您的工具？我们一直在扩充新的指南，同时您也可以按照 <a href="#post-css-tailwind-css">以 PostCSS 插件的形式安装 Tailwind CSS </a> 的文档来安装。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="post-css-tailwind-css"><a href="#post-css-tailwind-css" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>以 PostCSS 插件的形式安装 Tailwind CSS</span></h2><p>对于大多数现实中的工程，我们建议作为一个 PostCSS 插件来安装 Tailwind。大多数的现代框架基本都默认使用了 PostCSS，您很可能已经使用或当前正在使用其它 PostCSS 插件，例如 <a href="https://github.com/postcss/autoprefixer">autoprefixer</a>.</p><p>如果您从没有听说过 PostCSS，或者很想知道它与其它工具，如 Sass 的区别，请阅读我们的指南：<a href="/docs/using-with-preprocessors#using-post-css-as-your-preprocessor">将 PostCSS 用作预处理器</a>。</p><p>如果您觉得这有些麻烦，并且想在不配置 PostCSS 的情况下尝试使用 Tailwind，请阅读有关在 <a href="#post-css-tailwind-1">不依赖 PostCSS 使用 Tailwind </a>的说明。</p><h3 class="group flex whitespace-pre-wrap" id="npm-tailwind"><a href="#npm-tailwind" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>通过 npm 安装 Tailwind</span></h3><p>对于大多数项目（并利用 Tailwind 的自定义功能），您需要通过 npm 安装 Tailwind 及其依赖项。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> <span class="token function">install</span> tailwindcss@latest postcss@latest autoprefixer@latest</code></pre></div><p>由于 Tailwind <a href="/docs/browser-support#vendor-prefixes">不会自动添加浏览器引擎前缀</a>到生成的 CSS 中，我们建议您安装<a href="https://github.com/postcss/autoprefixer"> autoprefixer </a>  去处理这个问题，就像上面的代码片段所展示的那样。</p><p>如果您将 Tailwind 与依赖于旧版本 PostCSS 的工具集成在一起，则可能会看到如下错误：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">Error: PostCSS plugin tailwindcss requires PostCSS <span class="token number">8</span>.</code></pre></div><p>在这种情况下，您应该安装<a href="#post-css-7"> PostCSS 7 兼容性版本</a>。</p><h3 class="group flex whitespace-pre-wrap" id="post-css-tailwind"><a href="#post-css-tailwind" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>作为 PostCSS 插件来添加 Tailwind</span></h3><p>将 <code>tailwindcss</code> 和 <code>autoprefixer</code> 添加到您的 PostCSS 配置中。 多数情况下，这是项目根目录下的 <code>postcss.config.js</code> 文件，但也可能是 <code>.postcssrc</code> 文件或是由 package.json 文件中的 <code>postcss</code> 键所指定。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// postcss.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">{</span>
    tailwindcss<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    autoprefixer<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>如果您不太清楚如何在您正在使用的工具如何配置 PostCSS，则需要参考一下这些工具的文档。搜索 ”configure postcss {我的工具名字}” 也将很快为您提供答案。</p><p>如果您使用的是其他 PostCSS 插件，则应阅读有关<a href="/docs/using-with-preprocessors">将 PostCSS 用作预处理器</a>的文档，以获取有关与 Tailwind 集成在一起的最佳实践的详细信息。</p><h3 class="group flex whitespace-pre-wrap" id="-1"><a href="#-1" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>创建您的配置文件</span></h3><p>如果您想要自定义您的 Tailwind 安装，可以使用 Tailwind CLI 工具生成一份配置文件，这个命令行工具已包含在了 <code>tailwindcss</code> 这个 npm 包里了。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">npx tailwindcss init</code></pre></div><p>这将会在您的工程根目录创建一个最小的 <code>tailwind.config.js</code> 文件。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  purge<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  darkMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// or &#x27;media&#x27; or &#x27;class&#x27;</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    extend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  variants<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></code></pre></div><p>在<a href="/docs/configuration">配置文档</a>中了解有关配置 Tailwind 的更多信息。</p><h3 class="group flex whitespace-pre-wrap" id="tailwind-css"><a href="#tailwind-css" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>包含 Tailwind 到您的 CSS 中</span></h3><p>如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-css"><code class="language-css"><span class="token comment">/* ./your-css-folder/styles.css */</span>
<span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@tailwind</span> utilities<span class="token punctuation">;</span></span></code></pre></div><p>Tailwind 将在构建时将这些指令替换为基于您配置的设计系统生成的所有样式。</p><p>如果您使用的是  <code>postcss-import</code>（或背后使用它的工具，例如 <a href="https://github.com/rails/webpacker">Webpacker</a> for Rails），请使用我们的导入而不是 <code>@tailwind</code> 指令来避免在导入任何其他文件时出现问题：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;tailwindcss/base&quot;</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;tailwindcss/components&quot;</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;tailwindcss/utilities&quot;</span><span class="token punctuation">;</span></span></code></pre></div><p>如果您使用的是像 React 或 Vue 这样的 JavaScript 框架，支持直接将 CSS 文件导入到 JS 中，那么您也可以完全跳过创建 CSS 文件，而直接导入 tailwindcss / tailwind.css，而后者已经安装了所有这些指令：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// app.js</span>
<span class="token keyword module">import</span> <span class="token string">&quot;tailwindcss/tailwind.css&quot;</span></code></pre></div><h3 class="group flex whitespace-pre-wrap" id="css"><a href="#css" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>生成您的 CSS</span></h3><p>实际构建项目的方式将取决于您使用的工具。 您的框架可能包含诸如 <code>npm run dev</code> 之类的命令，以启动在后台编译 CSS 的开发服务器，您可能自己在运行 <code>webpack</code>，或者您正在使用 <code>postcss-cli</code> 并运行诸如 <code>postcss styles.css -o compiled.css</code> 之类的命令。</p><p>如果您已经熟悉 PostCSS，则可能知道您需要做什么，如果不熟悉，请参考所用工具的文档。</p><p>为生产而构建时，请确保配置清除 (purge) 选项以删除任何未使用类，这样生成的文件尺寸最小：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-diff-js"><code class="language-diff-js"><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> <span class="token comment">// tailwind.config.js</span>
<span class="token prefix unchanged"> </span> module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="token inserted-sign inserted language-js"><span class="token prefix inserted">+</span>   purge<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token prefix inserted">+</span>     <span class="token string">&#x27;./src/**/*.html&#x27;</span><span class="token punctuation">,</span>
<span class="token prefix inserted">+</span>     <span class="token string">&#x27;./src/**/*.js&#x27;</span><span class="token punctuation">,</span>
<span class="token prefix inserted">+</span>   <span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="token unchanged language-js"><span class="token prefix unchanged"> </span>   darkMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// or &#x27;media&#x27; or &#x27;class&#x27;</span>
<span class="token prefix unchanged"> </span>   theme<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token prefix unchanged"> </span>     extend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token prefix unchanged"> </span>   <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token prefix unchanged"> </span>   variants<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token prefix unchanged"> </span>   plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token prefix unchanged"> </span> <span class="token punctuation">}</span></span></code></pre></div><p>阅读我们有关<a href="/docs/optimizing-for-production">优化生产</a>的单独指南，以了解有关 tree-shaking 优化未使用样式以获得最佳性能的更多信息。</p><p>如果您将 Tailwind 与依赖于较旧版本 PostCSS 的工具集成在一起，则在尝试构建 CSS 时可能会看到如下错误：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">Error: PostCSS plugin tailwindcss requires PostCSS <span class="token number">8</span>.</code></pre></div><p>在这种情况下，您应该切换到我们的<a href="#post-css-7"> PostCSS 7 兼容性版本</a>。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="post-css-tailwind-1"><a href="#post-css-tailwind-1" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>不依赖 PostCSS 使用 Tailwind</span></h2><p>对于简单的项目或只是体验一下 Tailwind，您可以使用 Tailwind CLI 工具生成 CSS，而无需配置 PostCSS 或甚至不需要安装 Tailwind 作为依赖项。</p><p>使用 <code>npx</code> 这个工具，它会与 <code>npm</code> 一起自动安装，以生成完全编译的 Tailwind CSS 文件：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">npx tailwindcss-cli@latest build -o tailwind.css</code></pre></div><p>这将创建一个基于 Tailwind 的<a href="https://unpkg.com/browse/tailwindcss@%5E2/stubs/defaultConfig.stub.js">默认配置</a>生成的名为 <code>tailwind.css</code> 的文件，并使用 <a href="https://github.com/postcss/autoprefixer">autoprefixer</a> 自动添加任何必需的浏览器前缀。</p><p>现在，您可以像其他样式表一样将此文件引入到 HTML 中：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-html"><code class="language-html"><span class="token doctype">&lt;!doctype html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- ... --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/tailwind.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- ... --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre></div><h3 class="group flex whitespace-pre-wrap" id="css-1"><a href="#css-1" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>使用自定义 CSS 文件</span></h3><p>如果您想基于 Tailwind 生成的默认样式自定义任何 CSS ，通常情况下只需创建一个 CSS 文件，并使用 <code>@tailwind</code> 指令包含 Tailwind 的 <code>base</code>，<code>components</code> 和 <code>utilities</code> 样式：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-css"><code class="language-css"><span class="token comment">/* ./src/tailwind.css */</span>
<span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span>

<span class="token selector"><span class="token class">.btn</span></span> <span class="token punctuation">{</span>
  <span class="token atrule atapply"><span class="token rule">@apply</span> px-4 py-2 bg-<span class="token color">blue</span><span class="token number">-600</span> text-<span class="token color">white</span> rounded<span class="token punctuation">;</span></span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@tailwind</span> utilities<span class="token punctuation">;</span></span></code></pre></div><p>然后使用 <code>npx tailwindcss build</code> 构建 CSS 时，指定该文件的路径：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css</code></pre></div><p>阅读有关<a href="/docs/adding-base-styles">添加基本样式</a>，<a href="/docs/extracting-components">提取组件</a>以及<a href="/docs/adding-new-utilities">添加新的功能类</a>的文档，以了解有关在 Tailwind  基础上添加自定义 CSS 的更多信息。</p><h3 class="group flex whitespace-pre-wrap" id="-2"><a href="#-2" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>自定义您的配置</span></h3><p>如果您想自定义 Tailwind 生成的内容，请使用 Tailwind CLI 工具创建一个 <code>tailwind.config.js</code> 文件：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">npx tailwindcss-cli@latest init</code></pre></div><p>这将会在您工程的根目录生成一个最小版本的 <code>tailwind.config.js</code> 文件。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  purge<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  darkMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// or &#x27;media&#x27; or &#x27;class&#x27;</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    extend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  variants<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></code></pre></div><p>这个文件会在使用 <code>npx tailwindcss build</code> 命令生成您的 CSS 文件时被自动读取：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css</code></pre></div><p>如果您想将配置文件保存在其他位置或使用其他名称，请在构建 CSS 时使用 <code>-c</code> 选项传递配置文件路径：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">npx tailwindcss-cli@latest build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css</code></pre></div><p>了解更多<a href="/docs/configuration">配置 Tailwind 文档</a>。</p><h3 class="group flex whitespace-pre-wrap" id="-3"><a href="#-3" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>为生产而构建</span></h3><p>为生产而构建时，在生成 CSS 时在命令行上设置 <code>NODE_ENV = production</code>：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell"><span class="token assign-left variable">NODE_ENV</span><span class="token operator">=</span>production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css</code></pre></div><p>这将确保 Tailwind 删除所有未使用的 CSS 并最小化 CSS 文件以获得最佳性能。 阅读我们有关<a href="/docs/optimizing-for-production">优化生产</a>的单独指南，以了解更多信息。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="cdn-tailwind"><a href="#cdn-tailwind" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>通过 CDN 来使用 Tailwind</span></h2><p>在使用 CDN 之前，请注意，如果没有将 Tailwind 集成到您的构建过程中，那么许多使 Tailwind CSS 强大的功能将不可用。</p></div><ul class="list-none pl-0 space-y-3 my-5"><li class="flex items-start space-x-2"><svg class="w-6 h-6 flex-none mt-0.5" fill="none"><circle cx="12" cy="12" r="12" fill="#FECDD3"></circle><path d="M8 8l8 8M16 8l-8 8" stroke="#B91C1C" stroke-width="2"></path></svg><span class="prose">您无法自定义 Tailwind 默认主题</span></li><li class="flex items-start space-x-2"><svg class="w-6 h-6 flex-none mt-0.5" fill="none"><circle cx="12" cy="12" r="12" fill="#FECDD3"></circle><path d="M8 8l8 8M16 8l-8 8" stroke="#B91C1C" stroke-width="2"></path></svg><span class="prose">您不能使用任何 <a href="/docs/functions-and-directives">指令，</a> 如： <code>@apply</code>， <code>@variants</code> 等等</span></li><li class="flex items-start space-x-2"><svg class="w-6 h-6 flex-none mt-0.5" fill="none"><circle cx="12" cy="12" r="12" fill="#FECDD3"></circle><path d="M8 8l8 8M16 8l-8 8" stroke="#B91C1C" stroke-width="2"></path></svg><span class="prose">您无法启用更多的变体，如： <a href="/docs/hover-focus-and-other-states#group-focus"><code>group-focus</code></a></span></li><li class="flex items-start space-x-2"><svg class="w-6 h-6 flex-none mt-0.5" fill="none"><circle cx="12" cy="12" r="12" fill="#FECDD3"></circle><path d="M8 8l8 8M16 8l-8 8" stroke="#B91C1C" stroke-width="2"></path></svg><span class="prose">您无法下载第三方的插件</span></li><li class="flex items-start space-x-2"><svg class="w-6 h-6 flex-none mt-0.5" fill="none"><circle cx="12" cy="12" r="12" fill="#FECDD3"></circle><path d="M8 8l8 8M16 8l-8 8" stroke="#B91C1C" stroke-width="2"></path></svg><span class="prose">您无法 tree-shake 未使用到的 Styles</span></li></ul><div class="prose"><p>想要充分利用 Tailwind，您应该<a href="#post-css-tailwind-css">作为 PostCSS 插件安装 Tailwind</a>。</p><p>想要使用 Tailwind 进行快速演示，或者只是试一下框架，请通过 CDN 获取最新的默认配置：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></code></pre></div><p>请注意因为 CDN 文件很大 <em>(<!-- -->73.2kB<!-- --> compressed, <!-- -->3020.7kB<!-- --> raw)</em>, <strong>它并不代表您将 Tailwind 作为构建过程的一部分时生成的文件尺寸也是这么大</strong>.</p><p>遵循我们<a href="/docs/optimizing-for-production">最佳实践</a>的网站几乎总是压缩在10kb以下。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="html"><a href="#html" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>HTML 启动模板</span></h2><p>为了使 Tailwind 的样式能够按预期工作，您将需要使用 HTML5 文档类型并包括响应式视口元标记以正确处理所有设备上的响应式样式。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-html"><code class="language-html"><span class="token doctype">&lt;!doctype html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/tailwind.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- ... --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- ... --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre></div><p>许多前端框架（如 Next.js，vue-cli 等）会在后台自动为您完成所有这些操作，因此，根据您要构建的内容，可能不需要进行设置。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="post-css-7"><a href="#post-css-7" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>PostCSS 7 兼容性版本</span></h2><p>从 v2.0 版本开始，Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 才使用了几个月，因此生态系统中的许多其他工具尚未更新，这意味着在安装 Tailwind，并尝试编译 CSS 时，您可能会在终端中看到这样的错误：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell">Error: PostCSS plugin tailwindcss requires PostCSS <span class="token number">8</span>.</code></pre></div><p>为了弥合这个问题，直到每个人都进行了更新，我们还在 npm 的 <code>compat</code> 频道下发布了 PostCSS 7 兼容性版本。</p><p>如果遇到上述错误，请卸载 Tailwind 并使用兼容性版本重新安装：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> uninstall tailwindcss postcss autoprefixer
<span class="token function">npm</span> <span class="token function">install</span> tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9</code></pre></div><p>兼容性版本在任何方面都与主版本相同，因此您不会错过任何功能或类似功能。</p><p>一旦您的其余工具添加了对 PostCSS 8 的支持，就可以通过使用 <code>latest</code> 标签重新安装 Tailwind 及其相关依赖项来取代兼容性构建：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> uninstall tailwindcss @tailwindcss/postcss7-compat
<span class="token function">npm</span> <span class="token function">install</span> tailwindcss@latest postcss@latest autoprefixer@latest</code></pre></div></div></div><hr class="border-gray-200 mt-10 mb-4"/><div class="flex justify-between leading-7 font-medium"><a href="https://blog.tailwindcss.com/tailwindcss-v2">发布说明<!-- --> →</a></div></div><div class="hidden xl:text-sm xl:block flex-none w-64 pl-8 mr-8"><div class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) -mt-10 pt-10 pb-4 top-18"><div class="mb-8"><h5 class="text-gray-900 uppercase tracking-wide font-semibold mb-3 text-sm lg:text-xs">本页目录</h5><ul class="overflow-x-hidden text-gray-500 font-medium"><li><a href="#" class="block transform transition-colors duration-200 py-2 hover:text-gray-900 text-gray-900">集成指南</a></li><li><a href="#post-css-tailwind-css" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">以 PostCSS 插件的形式安装 Tailwind CSS</a></li><li class="ml-4"><a href="#npm-tailwind" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">通过 npm 安装 Tailwind</a></li><li class="ml-4"><a href="#post-css-tailwind" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">作为 PostCSS 插件来添加 Tailwind</a></li><li class="ml-4"><a href="#-1" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">创建您的配置文件</a></li><li class="ml-4"><a href="#tailwind-css" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">包含 Tailwind 到您的 CSS 中</a></li><li class="ml-4"><a href="#css" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">生成您的 CSS</a></li><li><a href="#post-css-tailwind-1" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">不依赖 PostCSS 使用 Tailwind</a></li><li class="ml-4"><a href="#css-1" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">使用自定义 CSS 文件</a></li><li class="ml-4"><a href="#-2" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">自定义您的配置</a></li><li class="ml-4"><a href="#-3" class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium">为生产而构建</a></li><li><a href="#cdn-tailwind" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">通过 CDN 来使用 Tailwind</a></li><li><a href="#html" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">HTML 启动模板</a></li><li><a href="#post-css-7" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">PostCSS 7 兼容性版本</a></li></ul></div></div></div></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/docs/installation","query":{},"buildId":"HgBbTMZ3YfwE_s19lauyf","nextExport":true,"autoExport":true,"isFallback":false,"head":[["meta",{"name":"viewport","content":"width=device-width"}],["meta",{"charSet":"utf-8"}],["meta",{"name":"twitter:site","content":"@tailwindcss"}],["meta",{"name":"twitter:description","content":"学习如何在您的工程中使用 Tailwind CSS"}],["meta",{"name":"twitter:creator","content":"@tailwindcss"}],["meta",{"property":"og:url","content":"https://tailwindcss.com/docs/installation"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:description","content":"学习如何在您的工程中使用 Tailwind CSS"}],["meta",{"property":"og:image","content":"https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"}],["link",{"rel":"preconnect","href":"https://BH4D9OD16A-dsn.algolia.net","crossOrigin":"true"}],["title",{"children":"安装 - Tailwind CSS"}],["meta",{"name":"twitter:title","content":"安装 - Tailwind CSS"}],["meta",{"property":"og:title","content":"安装 - Tailwind CSS"}],["meta",{"name":"twitter:card","content":"summary"}],["meta",{"name":"twitter:image","content":"https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"}]]}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/chunks/polyfills-b94cf467f33d5bbe5093.js"></script><script src="/_next/static/chunks/main-59b4822e49ee8af6cbd2.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/main-53486d82b2545edae223.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/commons.a0844ced5e8df247f6dc.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.badcd99128b41b157438.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/_app-f73fc4f2530091cec505.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.425fee7e5ce182155bfa.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/9f4ef91407e4b5afa7b6fb6ed79ed59ba0198a03.4b30abed5c56a7f9ac26.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/9f4ef91407e4b5afa7b6fb6ed79ed59ba0198a03.cff4864bd60c6088de2d.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/ce33ec08090f482ab0615cf50693463f3d0dfff9.beb468a512674e845e13.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/ce33ec08090f482ab0615cf50693463f3d0dfff9.f4323d55efa10804a132.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/docs/installation-3815ea3644f7dfd2df80.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/docs/installation-9a7c0a68655cdddbb753.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script> </script></body></html>